<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>

    <link rel="shortcut icon" href="${pageContext.request.contextPath}/image/title-img1.png">
    <link href="${pageContext.request.contextPath}/css/index.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/login.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/js/jsencrypt/bin/jsencrypt.min.js"></script>
    <title>登录_思必行-租车</title>
    <style>
        .login-page {
            width: 100%;
            min-width: 1190px;
            overflow: visible;
            height: 700px;
            position: relative;
        }

        .login-page-bg {
            position: absolute;
            z-index: 9;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            -moz-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
            -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
        }

        .login-page-word {
            opacity: 1;
            visibility: visible;
            position: absolute;
            z-index: 10;
            top: 20%;
            left: 5%;

            -moz-transition: opacity 1s ease .2s;
            -webkit-transition: opacity 1s ease;
            -webkit-transition-delay: .2s;
            transition: opacity 1s ease .2s;
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        }


        .login-page-container {
            position: relative;
            z-index: 99;
            margin: 0 auto;
            width: 1180px;
            height: 100%;
        }

        /* 头部导航的 */
        .global-header .login-page-header-nav li {
            float: left;
            margin-left: 30px;
        }

        .global-header .login-page-header-nav li i {
            margin-right: 10px;
            font-size: 28px;
            line-height: 1;
            color: #f6a206;
            vertical-align: middle;
        }

        .global-login-iconfont {
            font-family: "login-iconfont", serif;
            font-style: normal;
            font-weight: normal;
            cursor: default;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            *zoom: 1;
        }

        .global-header .login-page-header-nav li span {
            font-size: 14px;
            line-height: 28px;
            color: #666;
            vertical-align: middle;
        }
    </style>

</head>


<link rel="stylesheet" href="${pageContext.request.contextPath}/css/index-1.css">
<link href="${pageContext.request.contextPath}/css/headermenu.css" rel="stylesheet">

<body>


<header id="J-global-header" class="global-header">
    <div class="top-inner">
        <div id="sitenav" class="global-header-top-nav fn-clear">
            <div class="global-header-top-nav-right">
                <li class="top-nav-menu top-nav-menu-user-info" data-role="user-info" data-test="test">
                    <div class="top-nav-menu-handle">
                        <div class="login">
                            <%--                            <a href="${pageContext.request.contextPath}/login.jsp" class="J-login-btn" rel="nofollow" target="_self">登录/注册</a></div>--%>
                            <c:if test="${empty ServiceResponse}">
                                <a href="${pageContext.request.contextPath}/customer/login.jsp">登录/注册</a>
                            </c:if>

                            <c:if test="${!empty ServiceResponse}">
                                欢迎${ServiceResponse.data.custTelno}
                                <a href="${pageContext.request.contextPath}/logout">退出</a>
                            </c:if>
                        </div>
                    </div>
                </li>

                <li class="top-nav-menu top-nav-multi-menu top-nav-dl-app">
                    <div class="top-nav-menu-handle">
                        <i class="global-header-icon top-nav-dl-app-icon"></i>手机版
                    </div>
                    <div class="top-nav-menu-body top-nav-menu-qrcode">
                        <div class="top-nav-menu-bd-panel">
                            <div class="qrcode-img"></div>
                            <p>下载APP 领99元租车红包

                            </p>
                        </div>
                    </div>
                </li>

                <li class="top-nav-pipe">|</li>

                <li class="top-nav-menu top-nav-multi-menu top-nav-wx-guide">
                    <div class="top-nav-menu-handle"><i class="global-header-icon top-nav-wx-guide-icon"></i>微信</div>
                    <div class="top-nav-menu-body top-nav-menu-qrcode">
                        <div class="top-nav-menu-bd-panel">
                            <div class="qrcode-img"></div>
                            <p>扫一扫，关注微信</p>
                        </div>
                    </div>
                </li>
                <li class="top-nav-menu top-nav-multi-menu top-nav-order-lookup">
                    <div class="top-nav-menu-handle">订单查询<i class="top-nav-arrow"><em></em><span></span></i></div>
                    <div class="top-nav-menu-body top-nav-menu-list">
                        <div class="top-nav-menu-bd-panel">
                            <a href="${pageContext.request.contextPath}/center/myorder.jsp">订单查询</a>
                        </div>
                    </div>
                </li>
                <li class="top-nav-menu top-nav-multi-menu top-nav-order-lookup">
                    <div class="top-nav-menu-handle">个人中心<i class="top-nav-arrow"><em></em><span></span></i></div>
                    <div class="top-nav-menu-body top-nav-menu-list">
                        <div class="top-nav-menu-bd-panel">
                            <a href="${pageContext.request.contextPath}/center/user.jsp">进入个人中心</a>
                        </div>
                    </div>
                </li>
                <li class="top-nav-pipe">|</li>

            </div>

            <div class="global-header-top-nav-left">
                <div class="top-nav-menu top-nav-multi-menu top-nav-contact">
                    <div class="top-nav-menu-handle">
                        24小时客服！内地热线：110-120
                        <i class="top-nav-arrow"><em></em><span></span></i>
                    </div>
                    <div class="top-nav-menu-body top-nav-menu-list">
                        <div class="top-nav-menu-bd-panel">
                            <ul>
                                <li>
                                    <span class="title">中国内地热线</span>
                                    <a href="tel:10101020" target="_self" class="tel-number">110-120</a>
                                </li>
                            </ul>
                            <div class="top-nav-menu-bd-code">
                                <div class="qrcode-img"></div>
                                <p class="title">关注微信公众号</p>
                                <p class="text">可查询/修改/取消订单</p>
                                <a class="J-show-robot" href="javascript:" target="_self"
                                   data-tj="/公用头部/在线客服">24小时在线客服</a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="toolbar fn-clear">
        <div id="slog" class="logo fn-left">
            <a class="sbx-logo" title="思必行-租车" target="_self" href="">

            </a>
        </div>
        <div class="toolbar-site-header-nav">
            <ul class="login-page-header-nav fn-clear">
                <li><i class="global-login-iconfont">&#xe909;</i><span>有驾照就能租</span></li>
                <li><i class="global-login-iconfont">&#xe906;</i><span>地图导航</span></li>
                <li><i class="global-login-iconfont">&#xe908;</i><span>24小时服务在线</span></li>
            </ul>
        </div>
    </div>
</header>

<!--登录注册-->
<div class="login-page">
    <div class="login-page-bg"
         style="background: url('${pageContext.request.contextPath}/image/login1.png') no-repeat center #011329">
    </div>
    <div class="login-page-container">
        <img class="login-page-word" src="${pageContext.request.contextPath}/image/login2.png" width="420" height="220"
             alt="">
        <div class="login-box-warp login-box-container" id="J-login-box-warp"></div>
        <div id="LogOrRegView">
            <div class="logorreg-bg"></div>
            <div class="login-register-popup">
                <div class="popup-close"><span></span></div>
                <div class="popup-left">
                    <div class="popup-left-content">
                        <div class="popup-left-top">
                            <span></span><em></em>注册即享双重礼<em></em><span></span>
                        </div>
                        <ul class="popup-left-bottom">
                            <li>
                                <span class="welfare-icon1"></span>
                                <p>新用户首日立减100元</p>
                            </li>
                            <li>
                                <span class="welfare-icon2"></span>
                                <p>租一送一用车券</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="popup-right">
                    <form method="post" >
                        <div class="popup-logininfo">
                            <h3>会员登录</h3>
                            <span id="err-message" style="font-size: 10px;color: red"></span>
                            <ul class="poupp-logintab tab-clearfix">
                                <li class="poupp-logincur">快速登录<span></span></li>
                                <li>普通登录<span></span></li>
                            </ul>
                            <div class="popup-loginbox">
                                <div class="popup-login-quick">
                                    <ul class="popup-inputbox">
                                        <li>
                                            <input class="input-info" id="loginPhone" type="text" placeholder="请输入您的手机号"
                                                   maxlength="15">
                                            <span class="username-msg"></span>
                                        </li>
                                        <li>
                                            <input class="input-info" id="loginCode" type="text" placeholder="请输入验证码"
                                                   maxlength="6">
                                            <input id="loginCodeBtn" class="smscode" value="获取验证码" readonly>
                                        </li>
                                    </ul>
                                    <p class="popup-error-msg"></p>
                                    <p class="popup-agreement">
                                        <input id="loginAgree" type="checkbox">未注册租车账号的手机号，登录时将自动注册，且代表您已同意<a href=""
                                                                                                              target="_blank">《思必行租车会员注册协议》</a>和<a
                                            href="" target="_blank">《思必行租车隐私政策》</a>
                                    </p>
                                    <p class="popup-operate-btn">
                                        <a>
                                            <input type="submit" class="btn-popup" value="登录"/></a>

                                    </p>
                                </div>
                                <form method="post" action="${pageContext.request.contextPath}/login" id="login-from">
                                    <div class="popup-login-common hide">
                                        <ul class="popup-inputbox">
                                            <li>
                                                <input class="username" id="login-tel" name="custTelno" type="text"
                                                       placeholder="请输入用户名/手机号/邮箱"
                                                       maxlength="30">
                                                <span class="register-password-msg"></span>
                                            </li>
                                            <li>
                                                <input type="hidden" name="custPassword" id="password">
                                                <input class="password" name="custPassword" type="password"
                                                       placeholder="请输入密码"
                                                       maxlength="18">
                                                <span class="register-password-msg"></span>
                                            </li>
                                        </ul>
                                        <p class="popup-error-msg"></p>
                                        <p class="popup-login-forget">
                                            <a href="javascript:void(0)" id="FindPassword">忘记密码?</a>
                                        </p>
                                        <p class="popup-operate-btn">
                                            <a>
                                                <input type="button" class="btn-popup" value="登录"/></a>

                                        </p>
                                    </div>
                                </form>


                            </div>
                        </div>
                    </form>
                    <div class="popup-accountinfo">还没账号？<a href="register.jsp"> <span
                            id="registerNow">立即注册&gt;</span></a></div>
                </div>
            </div>
        </div>

    </div>
</div>

<!--页脚-->
<div class="footer">
    <div class="w1180">
        <div class="website-advantage">
            <ul class="wadvantage-list">
                <li>
                    <span class="city"></span>
                    <p>450多座城市</p>
                </li>
                <li>
                    <span class="dunpai"></span>
                    <p>7000多服务网点</p>
                </li>
                <li>
                    <span class="car"></span>
                    <p>200余种车型</p>
                </li>
                <li>
                    <span class="sun"></span>
                    <p>24小时服务</p>
                </li>
            </ul>
        </div>
    </div>
</div>


<script>


    //验证手机号码
    document.querySelector(".username").onblur = checkUserTel;

    function checkUserTel() {
        var userName = document.querySelector(".userName").value;
        if (userName == "" || userName == null) {// 是否为空
            //(3)消息提示
            document.querySelector(".username-msg").innerText = "手机号码不能为空";
            return false;
        } else if (!/^(0|86|17951)?1[0-9]{10}$/.test(userName)) {
            document.querySelector(".username-msg").innerText = "不是有效的手机号码";
            return false;
        } else {
            document.querySelector(".username-msg").innerText = "";
            return true;
        }
    }

    //验证密码
    document.querySelector(".password").onblur = checkPassword;

    function checkPassword() {
        var password = document.querySelector(".password").value;
        if (password == "" || password == null) {// 是否为空
            //(3)消息提示
            document.querySelector(".register-password-msg").innerText = "密码不能为空";
            return false;
        } else if (!/^[a-zA-Z0-9]\w{5,19}$/.test(password)) {
            document.querySelector(".register-password-msg").innerText = "密码只能由6~20字母数字或下划线";
            return false;
        } else {
            document.querySelector(".register-password-msg").innerText = "";
            return true;
        }
    }











    var PUBLIC_KEY = '';
    $(".btn-popup").click(function () {
        $.ajax({
            type: "GET",
            url: "${pageContext.request.contextPath}/publickey1",
            dataType: 'json',
            success: function (result) {
                PUBLIC_KEY = result.data; //获取公钥
                var encrypt = new JSEncrypt()
                encrypt.setPublicKey('-----BEGIN PUBLIC KEY-----' + PUBLIC_KEY + '-----END PUBLIC KEY-----');
                var password = $(".password").val();
                var encrypted = encrypt.encrypt(password);

                console.log('公钥:%o', PUBLIC_KEY);
                console.log('密码:%o', password)
                console.log('加密后数据:%o', encrypted);
                $('#password').val(encrypted);
                var custTelno = $("#login-tel").val();
                if (checkUserTel() && checkPassword() ) {
                    console.log("提交按钮")
                    var url  = "${pageContext.request.contextPath}/login";
                    $.post(
                        url,
                        {
                            custTelno : custTelno,
                            custPassword : encrypted
                        },
                        function (result){
                            if(result.code == 200){
                                window.location.href = "${pageContext.request.contextPath}"
                            }else{
                                $("#err-message").text("密码或则用户名错误")
                            }
                        }
                        ,"json"
                    )
                    // var form = document.querySelector("#login-from");
                    // console.log(form);
                    // form.submit();
                    // $("#login-from").submit();

                };
            }

        });
    });


</script>
<%--<script src="${pageContext.request.contextPath}/js/jquery-1.10.2.min.js"></script>--%>
<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
<script src="${pageContext.request.contextPath}/js/crypto.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jsEncrypt.js"></script>
<script src="${pageContext.request.contextPath}/js/mshowBox.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/loginOrRegister.js"></script>
<script src="${pageContext.request.contextPath}/js/sensorsdata.min.js"></script>
</body>
</html>